<!--  -->
<template>
  <div>
    <el-dialog :visible.sync="dialogVisible" center>
      <p
        style="
          line-height: 50px;
          font-size: 20px;
          margin: 10px 0;
          text-align: center;
        "
      >
        新增用户
      </p>
      <el-form
        :model="form"
        :rules="rules"
        ref="form"
        class="TableEdit"
        style="display: flex; justify-content: space-evenly; flex-wrap: wrap"
      >
        <el-form-item label="用户名" prop="name" class="dialog-form">
          <el-input
            v-model="form.name"
            autocomplete="on"
            class="dialog-input"
          ></el-input>
        </el-form-item>
        <el-form-item label="账户余额" prop="amount" class="dialog-form">
          <el-input
            v-model="form.amount"
            autocomplete="off"
            class="dialog-input"
          ></el-input>
        </el-form-item>
        <el-form-item label="现地址" prop="region" class="dialog-form">
          <el-input
            v-model="form.region"
            autocomplete="off"
            class="dialog-input"
          ></el-input>
        </el-form-item>
        <!-- <el-form-item label="生效状态" prop="state" class="dialog-form">
          <el-select
            v-model="form.state"
            placeholder="生效状态"
            class="dialog-input"
          >
            <el-option label="成功" value="true"></el-option>
            <el-option label="未启用" value="false"></el-option>
          </el-select>
        </el-form-item> -->
        <el-form-item label="用户头像" prop="ImageUrl" class="dialog-form">
          <el-input
            v-model="form.ImageUrl"
            autocomplete="off"
            class="dialog-input"
            placeholder="请输入url"
          ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <slot></slot>
        <el-button @click="resetForm('form')">取 消</el-button>
        <el-button type="primary" @click="DataSubmit('form')">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { formatDate } from "@/utils/formatDate.js"; //引入获取当前时间函数

export default {
  name: "AddFrom",
  data() {
    return {
      dialogVisible: false,
      form: {
        name: "",
        amount: "",
        region: "",
        state: "生效中",
        ImageUrl: "",
        time: "",
      },
      rules: {
        name: [
          { required: true, message: "请输入活动名称", trigger: "blur" },
          {
            min: 3,
            max: 10,
            message: "长度在 3 到 10 个字符",
            trigger: "blur",
          },
        ],
        amount: [
          { required: true, message: "请输入账户余额", trigger: "blur" },
        ],
        region: [{ required: true, message: "请选择住址", trigger: "blur" }],
        state: [
          { required: true, message: "请选择是否生效", trigger: "change" },
        ],
        ImageUrl: [
          { required: true, message: "请输入头像URL地址", trigger: "blur" },
        ],
        time: [{ required: true, message: "请选择注册时间", trigger: "blur" }],
      },
    };
  },
  created() {},
  mounted() {},
  methods: {
    // 提交数据给父组件
    DataSubmit(formName) {
      this.form.time = formatDate("YY-MM-DD hh:mm:ss");
      this.$refs[formName].validate((valid) => {
        if (valid) {
          const formData = {
            name: this.form.name,
            amount: this.form.amount,
            region: this.form.region,
            state: this.form.state,
            ImageUrl: this.form.ImageUrl,
            time: this.form.time,
          };
          // $emit方法把数据formData传给父组件
          this.$emit("formSubmit", formData);
          this.$refs[formName].resetFields();
          this.dialogVisible = !this.dialogVisible;
          console.log(formData);
        } else {
          this.$message.error("有必选项未填！");
          return false;
        }
      });
    },
    // 清空表单form
    resetForm(formName) {
      this.$refs[formName].resetFields();
      this.dialogVisible = false;
    },
    show() {
      this.dialogVisible = !this.dialogVisible;
    },
  },
};
</script>
<style scoped='less'>
/* 编辑页表格样式 */
.dialog-form {
  display: flex;
}
/* 编辑按钮中的输入框样式 */
.dialog-input {
  width: 200px;
  margin: 0 10px;
}
</style>